<template>
<div style="width:400px;margin:auto;">
<el-form ref="form" :model="form"  label-position="left"> <!--子组件和父组件数据的双向绑定-->
    <el-form-item label="填报日期" >
    <el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model="form.date" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="姓名" style="width:300px;">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="手机号码" style="width:300px;">
    <el-input v-model="form.phone_number"></el-input>
  </el-form-item>
  <el-form-item label="证件类型">
    <el-col :span="11"> <!--解决对齐问题-->
    <el-select v-model="form.licence_type" placeholder="请选择">
      <el-option label="身份证" value="1"></el-option>
      <el-option label="居住证" value="2"></el-option>
      <el-option label="护照" value="3"></el-option>
    </el-select>
    </el-col>
  </el-form-item>
  <el-form-item label="证件号码" style="width:300px;">
    <el-input v-model="form.licence_number"></el-input>
  </el-form-item>
  <el-form-item label="当前位置" style="width:300px;">
    <el-input v-model="form.address"></el-input>
  </el-form-item>
  <el-form-item label="紧急联系人" style="width:300px;">
    <el-input v-model="form.emergency_contact"></el-input>
  </el-form-item>
  <el-form-item label="紧急联系人手机号码" style="width:300px;">
      <el-input v-model="form.emergency_call_number"></el-input>
  </el-form-item>
  <el-form-item label="身体状况">
    <el-col :span="11"> <!--解决对齐问题-->
    <el-select v-model="form.health" placeholder="请选择">
      <el-option label="良好" value=1></el-option>
      <el-option label="异常" value=0></el-option>
    </el-select>
    </el-col>
  </el-form-item>
  <el-form-item label="今日体温" style="width:300px;">
    <el-input v-model="form.temperature"></el-input>
  </el-form-item>
  <el-form-item label="是否到过置顶的疫情防控重点地区">
    <el-col :span="11"> <!--解决对齐问题-->
    <el-select v-model="form.been_to_danger_area" placeholder="请选择" >
      <el-option label="是" value=1></el-option>
      <el-option label="否" value=0></el-option>
    </el-select>
    </el-col>
  </el-form-item>
  <el-form-item label="是否接触过疑似病例/确诊病例">
    <el-col :span="11"> <!--解决对齐问题-->
    <el-select v-model="form.contact_with_patient" placeholder="请选择">
      <el-option label="是" value=1></el-option>
      <el-option label="否" value=0></el-option>
    </el-select>
    </el-col>
  </el-form-item>
  <el-form-item label="是否为重点人群">
    <el-col :span="11"> <!--解决对齐问题-->
    <el-select v-model="form.vital_people" placeholder="请选择">
      <el-option label="是" value=1></el-option>
      <el-option label="否" value=0></el-option>
    </el-select>
    </el-col>
  </el-form-item>
  <el-form-item label="备注" style="width:300px;">
    <el-input type="textarea" v-model="form.remark"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">提交</el-button>
    <el-button @click="logout">退出</el-button>
  </el-form-item>
</el-form>
</div>
</template>
<script>
import axios from 'axios'

export default {
  name: 'Login',
  data () {
    return {
      form: {
        date: '',
        name: '',
        phone_number: '',
        licence_type: '',
        licence_number: '',
        address: '',
        emergency_contact: '',
        emergency_call_number: '',
        health: '',
        temperature: '',
        been_to_danger_area: '',
        contact_with_patient: '',
        vital_people: '',
        remark: ''
      }
    }
  },
  methods: {
    logout () {
      axios({
        withCredentials: true,
        maxRedirects: 0,
        method: 'post',
        url: '/user/logout',
        timeout: 4000
      }, ErrorEvent => {
        this.$message('登出失败')
      }).then((res) => {
      }, ErrorEvent => {
        location.href = 'http://localhost:8080/user/login_frontend'
      })
    },
    onSubmit () {
      console.log('submit!')
      /* json格式提交： */
      // let formData = JSON.stringify(this.formMess);
      /* formData格式提交： */
      let formData = new FormData()
      for (var key in this.form) {
        formData.append(key, this.form[key])
      }
      let loginType = this.$route.query.loginType
      formData.append('loginType', loginType)
      if (loginType === '1') {
        formData.append('username', this.$route.query.username)
        console.log('直接')
      } else if (loginType === '3') {
        formData.append('userid', this.$route.query.userid)
        console.log('三方')
      }
      axios({
        method: 'post',
        url: '/health-post',
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        withCredentials: true,
        data: formData
      }).then((res) => {
        if (res.data === 'repeat') {
          this.$message.error('请勿重复提交')
        } else {
          this.$message('提交成功')
        }
      }, ErrorEvent => {
        this.$message.error('提交失败')
      })
    }
  }
}
</script>
